<template>
  <div id="box">
      <h1>欢迎使用教务管理系统</h1>
<!--
{{}} vue中的插值语法  体现数据的动态性
-->
      <div class="welcome">欢迎您: {{username}} </div>
      <div class="logout">
          <el-button icon="el-icon-switch-button" type="danger" circle size="mini" @click="logout"></el-button>
      </div>
      <nav>
          <router-link :to="{name:'home'}">首页</router-link>
          |
          <router-link :to="{name:'user'}">用户管理</router-link>
          |
          <router-link :to="{name:'student'}">学生管理</router-link>
          |
          <router-link :to="{name:'score'}">成绩管理</router-link>
          |
          <router-link :to="{name:'clazz'}">班级管理</router-link>
      </nav>
<!--  路由出口-->
        <RouterView></RouterView>
  </div>
</template>

<script>

export default {
    name: "IndexView",
    data(){
        return{
            username:sessionStorage.getItem("username")
        }
    },
    methods:{
        logout(){
            // 确认框 避免用户的误操作
            this.$confirm('确认退出登录?', '退出', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //  切换路由   通过路由管理对象 切换路由
                this.$message({
                    type:"success",
                    message:'安全退出，页面即将跳转',
                    onClose:()=>{
                        // 清空本地缓存
                        sessionStorage.removeItem("username")
                        // 通过编程式实现路由的跳转
                        this.$router.push({name:'login'})
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消退出'
                });
            });

        }
    }
}
</script>

<style scoped>

h1{
    color: #42b983;
    background-color: azure;
    text-align: center;
    border-bottom: 1px solid  #42b983;
}

nav {
    padding: 30px;
    text-align: center;
}

nav a {
    font-weight: bold;
    color: #2c3e50;
}

nav a.router-link-exact-active {
    color: #42b983;
}

#box{
    position: static;
}
.welcome{
    font-size: 15px;
    color: #ff6700;
    position: absolute;
    right: 80px;
    top: 15px;
}

.logout{
    position: absolute;
    right: 40px;
    top: 12px;
}

</style>